<template>
  <div class="twui-echarts">
    <div
        ref="echarts"
        :id="id"
        class="twui-echarts__container"
        :class="{'twui-echarts__container--nodata':noData}"
        :style="{height:height,width:width}"
        >
    </div>
    <div class="twui-echarts__container nodata_container"
         v-if="this.noData"
         :style="{height:height,width:width}">
      <div class="nodata__content">
        <img src="/static/weishidataview/images/enodata.png" alt="nodata">
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import { Option } from '@/assets/echarts/Option.js'

export default{
  props: ['id', 'height', 'additionalOptions','width'],
  data: function () {
    return {
      echartsOption: {},
      noData: false
    }
  },
  methods: {
    resizeChart () {
      let temp = document.getElementById(this.id)
      if (temp) {
        if (temp.offsetWidth === 0) {
          setTimeout(() => { this.resizeChart() }, 200)
        }
        let myChart = echarts.init(document.getElementById(this.id))
        myChart.resize()
      } else {
        setTimeout(() => { this.resizeChart() }, 200)
      }
    },
    rebuildChart () {
      let keys = Object.keys(this.additionalOptions)
      let myChart = document.getElementById(this.id)
      myChart = echarts.init(myChart)
      if (keys.length > 0) {
        myChart.clear()
        this.echartsOption = []
        this.echartsOption = new Option(this.id, this.additionalOptions, myChart).getOption()
        myChart.hideLoading()
        myChart.setOption(this.echartsOption)
        this.$emit('finishCharts', '渲染完成')
      } else {
        myChart.hideLoading()
        this.noData = true
      }
    }
  },
  mounted: function () {
    this.$watch('additionalOptions', function () {
      // 监听数值的变化，变化后通知echarts进行刷新
      this.rebuildChart('additionalOptions===========', this.additionalOptions)
    }, { deep: true })
    let myChart = document.getElementById(this.id)
    myChart = echarts.init(myChart)
    // myChart.showLoading({
    //   text: '加载中...',
    //   color: '#fff',
    //   textColor: '#fff',
    //   maskColor: 'rgba(255, 255, 255, 0.1)',
    //   zlevel: 0,
    //   fontSize: 20,
    //   showSpinner: true,
    //   spinnerRadius: 10,
    //   lineWidth: 5
    // })
  }
}
</script>

<style scoped></style>
